<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<!-- 	<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="back-icon" @click="goBack">
					<image src="/static/back.png" mode="aspectFit"></image>
				</view>
				<text class="title">预约详情</text>
			</view>
		</view> -->

		<!-- 核销码区域 -->
		<view class="section qrcode-section">
			<view class="verify-header">
				<view class="verify-icon">🎫</view>
				<text class="verify-title">核销码</text>
			</view>
			<view class="verify-code">
				<text class="code-label">核销码：</text>
				<text class="code">WE343235V</text>
			</view>
			<view class="qrcode-container">
				<view class="qrcode-wrapper">
					<image src="/static/images/qrcode.png" class="qrcode" mode="widthFix" alt="核销二维码"></image>
				</view>
			</view>
		</view>

		<!-- 维修信息区域 -->
		<view class="section">
			<view class="section-title">
				<view class="title-icon">🔧</view>
				<text>维修信息</text>
			</view>
			<view class="info-list">
				<view class="info-item">
					<text class="info-label">维修单号：</text>
					<text class="info-value">3535252</text>
				</view>
				<view class="info-item">
					<text class="info-label">维修状态：</text>
					<text class="info-value status-processing">进行中</text>
				</view>
				<view class="info-item">
					<text class="info-label">车主姓名：</text>
					<text class="info-value">张</text>
				</view>
				<view class="info-item">
					<text class="info-label">联系方式：</text>
					<text class="info-value">1993829282</text>
				</view>
				<view class="info-item">
					<text class="info-label">维修方式：</text>
					<text class="info-value">上门取车</text>
				</view>
				<view class="info-item">
					<text class="info-label">取车位置：</text>
					<text class="info-value">山阳区32号</text>
				</view>
				<view class="info-item">
					<text class="info-label">预约日期：</text>
					<text class="info-value">2022/11/10 11:00</text>
				</view>
				<view class="info-item">
					<text class="info-label">提交日期：</text>
					<text class="info-value">2022/11/08 12:34</text>
				</view>
			</view>
		</view>

		<!-- 车辆信息区域 -->
		<view class="section">
			<view class="section-title">
				<view class="title-icon">🚗</view>
				<text>车辆信息</text>
			</view>
			<view class="info-list">
				<view class="info-item">
					<text class="info-label">车辆类型：</text>
					<text class="info-value">大客车</text>
				</view>
				<view class="info-item">
					<text class="info-label">车牌号：</text>
					<text class="info-value">豫J45323</text>
				</view>

				<view class="info-item photo-item">
					<text class="info-label">整车照片：</text>
					<view class="photo-container">
						<image src="https://picsum.photos/200/300" class="car-photo" mode="widthFix" alt="整车照片"></image>
					</view>
				</view>

				<view class="info-item photo-item">
					<text class="info-label">维修部位照片：</text>
					<view class="photos-container">
						<image src="https://picsum.photos/200/300?1" class="car-photo" mode="widthFix" alt="维修部位照片1">
						</image>
						<image src="https://picsum.photos/200/300?2" class="car-photo" mode="widthFix" alt="维修部位照片2">
						</image>
						<image src="https://picsum.photos/200/300?3" class="car-photo" mode="widthFix" alt="维修部位照片3">
						</image>
					</view>
				</view>
			</view>
		</view>

		<!-- 取消预约按钮 -->
		<view class="cancel-section">
			<button class="cancel-btn" @click="cancelAppointment">
				<view class="btn-content">
					<view class="btn-icon">❌</view>
					<text>取消预约</text>
				</view>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				// 可以从路由参数中获取订单号
				orderNo: ''
			};
		},
		onLoad(options) {
			// 获取系统信息，计算状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;

			// 接收从成功页面传递的订单号
			if (options.orderNo) {
				this.orderNo = options.orderNo;
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 取消预约
			cancelAppointment() {
				uni.showModal({
					title: '提示',
					content: '确定要取消预约吗？',
					success: (res) => {
						if (res.confirm) {
							// 这里添加取消预约的逻辑
							uni.showToast({
								title: '预约已取消',
								icon: 'success'
							});
							// 取消后返回上一页
							setTimeout(() => {
								this.goBack();
							}, 1500);
						}
					}
				});
			}
		}
	};
</script>

<style>
	.container {
		background: linear-gradient(180deg, #f7f9fc 0%, #f0f4ff 100%);
		min-height: 100vh;
	}

	/* 自定义导航栏 */
	.custom-nav {
		background: linear-gradient(90deg, #2a8cff 0%, #5aa9ff 100%);
		color: #fff;
		box-sizing: border-box;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
	}

	.nav-content {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 0 20rpx;
		gap: 16rpx;
	}

	.back-icon {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.18);
		transition: transform 0.15s ease, background 0.2s ease;
	}

	.back-icon:active {
		transform: scale(0.96);
		background: rgba(255, 255, 255, 0.28);
	}

	.back-icon image {
		width: 40rpx;
		height: 40rpx;
		filter: drop-shadow(0 2rpx 2rpx rgba(0, 0, 0, 0.1));
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 34rpx;
		font-weight: 700;
		letter-spacing: 1rpx;
		color: #fff;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
	}

	/* 区块样式 */
	.section {
		background: #ffffff;
		margin: 24rpx 20rpx 12rpx;
		padding: 32rpx;
		border-radius: 24rpx;
		box-shadow: 0 10rpx 28rpx rgba(0, 0, 0, 0.06);
		border: 1rpx solid rgba(0, 0, 0, 0.04);
	}

	/* 二维码区块特殊样式 */
	.qrcode-section {
		text-align: center;
		padding: 40rpx 32rpx;
		background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
	}

	.verify-header {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 24rpx;
	}

	.verify-icon {
		font-size: 28rpx;
		margin-right: 12rpx;
	}

	.verify-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #1f2d3d;
	}

	/* 核销码样式 */
	.verify-code {
		margin-bottom: 32rpx;
	}

	.code-label {
		font-size: 28rpx;
		color: #6b7a90;
		margin-right: 12rpx;
	}

	.code {
		font-size: 32rpx;
		font-weight: 700;
		color: #2a8cff;
		letter-spacing: 2rpx;
		background: rgba(42, 140, 255, 0.1);
		padding: 8rpx 16rpx;
		border-radius: 12rpx;
	}

	/* 二维码样式 */
	.qrcode-container {
		display: flex;
		justify-content: center;
	}

	.qrcode-wrapper {
		background: #fff;
		padding: 24rpx;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.qrcode {
		width: 240rpx;
		height: 240rpx;
		border-radius: 12rpx;
	}

	/* 区块标题 */
	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #1f2d3d;
	}

	.title-icon {
		font-size: 28rpx;
		margin-right: 12rpx;
	}

	/* 信息列表 */
	.info-list {
		width: 100%;
	}

	/* 信息项 */
	.info-item {
		display: flex;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f0f2f5;
		align-items: center;
		transition: background 0.2s ease;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-item:hover {
		background: rgba(42, 140, 255, 0.02);
		border-radius: 12rpx;
		margin: 0 -16rpx;
		padding: 24rpx 16rpx;
	}

	/* 信息标签 */
	.info-label {
		width: 200rpx;
		font-size: 28rpx;
		color: #6b7a90;
		font-weight: 500;
	}

	/* 信息值 */
	.info-value {
		flex: 1;
		font-size: 28rpx;
		color: #1f2d3d;
		text-align: left;
		font-weight: 500;
	}

	/* 进行中状态样式 */
	.status-processing {
		color: #ff6600;
		background: rgba(255, 102, 0, 0.1);
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		font-weight: 600;
	}

	/* 照片项特殊样式 */
	.photo-item {
		flex-direction: column;
		align-items: flex-start;
		padding: 24rpx 0 32rpx;
	}

	.photo-item .info-label {
		margin-bottom: 20rpx;
	}

	/* 照片容器 */
	.photo-container {
		width: 100%;
	}

	/* 多照片容器 */
	.photos-container {
		width: 100%;
		display: flex;
		gap: 16rpx;
		flex-wrap: wrap;
	}

	/* 车辆照片样式 */
	.car-photo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
		object-fit: cover;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: transform 0.3s ease;
	}

	.car-photo:hover {
		transform: scale(1.02);
	}

	/* 取消预约按钮区域 */
	.cancel-section {
		margin: 40rpx 20rpx 60rpx;
		padding: 0 8rpx;
	}

	.cancel-btn {
		width: 100%;
		background: linear-gradient(90deg, #ff4757 0%, #ff3742 100%);
		color: #ffffff;
		border-radius: 38rpx;
		border: none;
		box-shadow: 0 12rpx 24rpx rgba(255, 71, 87, 0.32);
		transition: all 0.3s ease;
		overflow: hidden;
		position: relative;
	}

	.cancel-btn:active {
		transform: translateY(2rpx) scale(0.98);
		box-shadow: 0 8rpx 16rpx rgba(255, 71, 87, 0.28);
	}

	.btn-content {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		padding: 28rpx 0;
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 1rpx;
	}

	.btn-icon {
		font-size: 28rpx;
		transition: transform 0.3s ease;
	}

	.cancel-btn:active .btn-icon {
		transform: scale(1.1);
	}
</style>